<template>
	<view class="content">
		<view class="title">
			<text>{{questionTitle}}</text>
		</view>
		<view class="desc">
			<textarea show-confirm-bar="false" fixed="true" v-model="content" placeholder="说说你的看法" auto-height="true" maxlength="500" />
			</view>
		
		<view :class="btn" @tap="send">
			<text class="right">发送</text>
		</view>
	</view>
</template>

<script>
	
		import utils from "../../static/js/utils.js"
		import {
				mapState,
				mapMutations
			} from 'vuex';
	export default {
		data() {
			return {
				questionId:0,
				questionTitle:'',
				content:''
			}
		},
		computed:{
			...mapState(['user']),
			btn(){
				if(this.judge()){
					return "btn";
				}
				return "btn dis"
			}
		},
		methods: {
			...mapMutations(['setAnswerChange']),
			send(){
				let that = this;
				if(this.judge()){
					utils.post("question/addanswer",{
						questionId:this.questionId,
						userId:this.user.id,
						content:this.content
					},function(data){
						that.setAnswerChange({
							answerChange:true
						})
						uni.navigateBack({
							delta: 1
						});
					})
				}
			},
			judge(){
				if(this.content.length==0) {
					return false;
				}
				return true;
			},
		},
		onLoad(option) {
			this.questionId = option.questionId;
			this.questionTitle = option.questionTitle;
		}
	}
</script>

<style>
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.title{
		width: 92%;
		height: 100upx;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}
	.title text{
		font-size: 32upx;
		height: 100upx;
		line-height: 100upx;
		font-weight: 600;
	}
	.img{
		position: relative;
		width: 92%;
		margin-top: 40upx;
		height: 300upx;
		margin-bottom: 130rpx;
	}
	.img image {
		width: 100%;
		max-height: 300upx;
	}
	.desc{
		width: 92%;
		max-height: 700upx;
		font-size: 28upx;
		margin-top: 30upx;
	}
	.desc textarea{
		width: 100%;
	}
	.close{
		position: absolute;
		top: 10upx;
		right: 10upx;
		height: 60upx;
		background-color:#000000;
		opacity:0.7;
		text-align:center;
		line-height:60rpx;
		border-radius:60rpx;
		width: 60upx;
		font-size: 40upx;
		color: #ffffff;
	}
	.btn {
		width: 100%;
		height: 100upx;
		background-color: #FF4040;
		display: flex;
		font-size: 28upx;
		color: #ffffff;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
	}
	.left{
		display: flex;
		height: 110upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.left image{
		height: 40upx;
		width: 40upx;
	}
	.left text {
		font-size: 26upx;
		color: #999999;
		margin-left: 10upx;
	}
	.dis {
		opacity: 0.3;
	}
</style>
